<template>
  <div class="tags">
    <el-tag v-for="(item,index) in tags"
    :key="item.name"
    :closable="item.name!='home'"
    :name="item.name"
    size="small"
    @click="changeMenu(item)"
    :effect="$route.name===item.name?'dark':'plain'"
    @close="handleClose(item,index)"
    >{{item.lable}}</el-tag>
  </div>
</template>
<script>
import { mapState ,mapMutations} from "vuex"
export default ({
  name:"CommonTag",
  data(){
    return{

    }
  },
  computed:{
    ...mapState({
      tags:state=>state.tab.tabsList
    })
  },
  methods:{
    ...mapMutations({
      close:'closeTag'
    }),
    changeMenu(tag){
      this.$router.push({
        name:tag.name
      })
    },
    handleClose(tag,index){
      const length=this.tags.length-1;
      this.close(tag)
      if(tag.name!=this.$route.name){
        return;
      }
      if(index===length){
        this.$router.push({
          name:this.tags[index-1].name
        })
      }else{
        this.$router.push({
          name:this.tags[index].name
        })
      }
      
    },
   
  }
})
</script>
<style lang="less" scoped>
.tags{
  padding: 10px;
  .el-tag{
    margin-right: 15px;
    cursor: pointer;
  }
}
</style>
